<template>
	<view class="content">
		<!--  #ifdef APP-PLUS -->
		<view class="top-bar"></view>
		<!--  #endif -->
		<!--吸顶搜索-->
		<search-small :shareTemplate="shareTemplate" :visible="isShowSearch"></search-small>

		<!--搜索栏-->
		<search :shareTemplate="shareTemplate"></search>

		<!--活动专题入口-->
		<special
			ref="special"
			:permInfo="permInfo"
			:newPerson="newPerson"
			:isFirstOrder="isFirstOrder"
		></special>

		<!--商品列表-->
		<skeleton
			class="tab-skeleton"
			:loading="isTabLoading"
			:showAvatar="false"
			:showTitle="false"
			:row="6"
		>
			<view class="tab-nav">
				<view class="left">
					<tab
						ref="tab"
						@tabChange="tabChangeCustom"
						:list="list"
						:stickyTop="stickyTop"
					></tab>
				</view>
				<view class="right" @tap="$refs.sortPopup.open()"
					><text class="iconfont icon-fenlei"></text
				></view>
			</view>
			<!--渲染商品列表-->
			<view class="goods-refresh" v-if="active == 0">
				<image
					class="goods-refresh__icon"
					:src="require('@/static/images/index/icon-time.png')"
				></image>
				精选好货
				<view class="goods-refresh__point"></view>
				<view class="goods-refresh__ac">每十分钟刷新一次</view>
			</view>
			<view class="goods-list">
				<block v-for="(goodsItem, goodsIndex) in list[active].goodsList" :key="goodsIndex">
					<view class="goods-wrap">
						<zero-item :item="goodsItem" :permInfo="permInfo" v-if="goodsItem.isBackGood === 1"></zero-item>
						<goods-item :item="goodsItem" :permInfo="permInfo" v-else></goods-item>
					</view>
					<view class="tab-box" v-if="goodsIndex == 4 && active == 0">
						<view class="tab-box__title">大家都在搜</view>
						<view class="tab-box__li">
							<block v-for="(item, index) in hotKeyList" :key="index">
								<view
									class="goods-list__tag"
									:class="index == 0 ? 'active' : ''"
									@tap="toResult(item)"
									v-if="index <= 7"
								>
									<text
										class="iconfont icon-remenwenti"
										v-if="index === 0"
									></text>
									{{ item }}
								</view>
							</block>
						</view>
					</view>
				</block>

				<!--商品骨架-->
				<block v-for="i in ['a', 'b', 'c']" :key="i">
					<view
						class="skeleton-wrap"
						v-if="
							list[active].goodsList.length === 0 &&
								!list[active].finished &&
								!list[active].empty
						"
					>
						<skeleton
							class="goods-skeleton"
							:loading="true"
							avatarShape="square"
							avatarSize="228rpx"
						></skeleton>
					</view>
				</block>

				<!-- 加载中插件 -->
				<load-more
					:loading="list[active].loading"
					:finished="list[active].finished"
					:empty="list[active].empty"
				></load-more>
			</view>
		</skeleton>

		<!--商品骨架-->
		<view class="skeleton-wrap" v-for="i in ['d', 'e', 'f', 'g']" :key="i">
			<skeleton
				class="goods-skeleton"
				:loading="isTabLoading"
				avatarShape="square"
				avatarSize="228rpx"
			></skeleton>
		</view>

		<!-- 新人免单指引 -->
		<template v-for="(item, index) in permInfo.common">
			<view class="user-guid" v-if="item.name === 'isNew' && item.status === 1">
				<!-- 新人免单悬浮 -->
				<view
					class="side-float"
					:class="[{ hide: isShowScrollTop }]"
					v-if="newPerson && isFirstOrder"
				>
					<view class="img-box" @tap="toNew()"
						><image mode="widthFix" class="image" src="@/static/images/index/float.png"
					/></view>
				</view>
			</view>
		</template>

		<!--淘宝授权指引-->
		<view
			class="authorize"
			v-if="
				(userInfo.tbStatus === 0 || userInfo.tbStatus === 2 || userInfo.tbStatus === 3) &&
					authorizeStatus
			"
		>
			<view class="left">
				<view class="text">
					<text class="iconfont icon-qian3"></text>
					登录领淘宝大额券、现金补贴
				</view>
				<view class="submit" @tap="$refs.authorize.open()">
					<text class="iconfont icon-taobao1"></text>
					淘宝一键授权
				</view>
			</view>
			<text class="iconfont close icon-guanbi" @tap="authorizeStatus = false"></text>
		</view>

		<!--微信登录弹窗-->
		<popup ref="wechatLogin" class="wechat-login" @change="onChangeLogin">
			<view class="main">
				<image mode="widthFix" class="bg" src="@/static/images/special/packet-close.png" />
				<image
					mode="widthFix"
					class="to-wechat"
					@tap="toWechatLogin"
					src="@/static/images/special/packet-login.png"
				/>
				<text class="iconfont icon-guanbi" @tap="$refs.wechatLogin.close()"></text>
			</view>
		</popup>

		<!-- 商品分类 -->
		<popup ref="sortPopup" class="sort-popup" @change="onChangeSort" type="bottom">
			<view class="main" @touchmove.stop.prevent>
				<text class="iconfont icon-guanbi" @tap="$refs.sortPopup.close()"></text>
				<scroll-view
					scroll-y="true"
					:scroll-with-animation="true"
					:show-scrollbar="false"
					class="side-list"
				>
					<view
						class="side-item"
						:class="[{ active: sortActive === index }]"
						v-for="(item, index) in sortList"
						:key="index"
						@tap="changeSelect(item, index)"
					>
						<view class="line"></view>
						{{ item.mainName }}
					</view>
				</scroll-view>

				<!-- 商品内容 -->
				<scroll-view
					scroll-y="true"
					:scroll-with-animation="true"
					:show-scrollbar="false"
					class="classify-info"
				>
					<view
						class="first-classify"
						v-for="(item, index) in sortGoodsList"
						:key="index"
					>
						<view class="classify-type">
							<view class="line"></view>
							<text class="text">{{ item.nextName }}</text>
							<view class="line"></view>
						</view>
						<view class="classify-detail">
							<view
								class="last-classify"
								v-for="(info, infoIndex) in item.list"
								:key="infoIndex"
								@click="sortToResult(info.sonName)"
							>
								<view class="img-box">
									<image
										class="image"
										:src="info.imgUrl | imageCompress"
										alt=""
									/>
								</view>
								<text class="text">{{ info.sonName }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</popup>

		<!--回到顶部-->
		<view class="scrollTop" :class="[{ show: isShowScrollTop }]" @tap="backTop"
			><text class="iconfont icon-huidaodingbu"></text
		></view>

		<!--授权弹窗-->
		<authorize ref="authorize"></authorize>
		<!--版本更新-->
		<app-update ref="appUpdate"></app-update>
		<!--智能搜索-->
		<ai-search ref="aiSearch"></ai-search>
	</view>
</template>

<script>
import Tab from '@/components/uni/Tab';
import Skeleton from '@/components/uni/Skeleton';
import Refresh from '@/components/uni/Refresh';
import ZeroItem from '@/components/special/ZeroItem';
import GoodsItem from '@/components/GoodsItem';
import Popup from '@/components/uni/Popup';
import LoadMore from '@/components/LoadMore';
import Authorize from '@/components/Authorize';
import AppUpdate from '@/components/AppUpdate';
import Search from '@/components/index/Search';
import SearchSmall from '@/components/index/SearchSmall';
import Special from '@/components/index/Special';
import loader from '@/utils/mixin/loader';
import { mapGetters } from 'vuex';
const JDopen = uni.requireNativePlugin('UZK-JDopen');

export default {
	name: 'index',
	mixins: [loader],
	components: {
		Tab,
		Skeleton,
		Refresh,
		Search,
		SearchSmall,
		Special,
		ZeroItem,
		GoodsItem,
		LoadMore,
		Popup,
		Authorize,
		AppUpdate
	},
	data() {
		return {
			isTabLoading: true,
			stickyTop: 196,
			shareTemplate: [],
			isShowNewPerson: false,
			authorizeStatus: true,
			clipboard: null,
			refreshTime: 0,
			hotKeyList: [],
			refreshType: null,
			isLoginPopup: false,
			sortList: [],
			sortGoodsList: [],
			sortActive: 0,
			cid: null,
			newPerson: true,
			isFirstOrder: true,
			showRecommednGoods: true
		};
	},
	computed: {
		...mapGetters(['userInfo', 'permInfo'])
	},
	onLoad() {
		// #ifdef H5
		this.stickyTop = 146;
		// #endif
		this.init();

		this.$nextTick(() => {
			// 是否显示更新弹窗
			let updateInfo = uni.getStorageSync('updateInfo');
			if (updateInfo.showUpdate !== 'false' && updateInfo.version !== plus.runtime.version) {
				this.$store.state.common.appUpdate = true;
				this.$refs.appUpdate.getServerNo();
			}

			// 是否开启微信登录弹窗
			this.permInfo.common.forEach(item => {
				if (item.name === 'isShelf' && item.status === 1) {
					if (!uni.getStorageSync('token')) {
						this.$refs.wechatLogin.open();
						this.isLoginPopup = true;
					}
				}
			});
		});

		// 静默上报设备信息
		// let deviceInfo = {};
		// deviceInfo.cid = plus.push.getClientInfo().clientid;
		// let os = plus.os.name;
		// if (os === 'Android') {
		// 	deviceInfo.os = 0;
		// } else {
		// 	deviceInfo.os = 1;
		// }
		// plus.device.getInfo({
		// 	success: e => {
		// 		deviceInfo.uuid = e.uuid;
		// 		deviceInfo.imei = e.imei;
		// 		deviceInfo.imsi = e.imsi.join(',');

		// 		this.$service.common.equipmentInfo
		// 			.add(deviceInfo)
		// 			.then(res => {
		// 				console.log(res);
		// 			})
		// 			.catch(err => {});
		// 	},
		// 	fail: e => {}
		// });
	},
	onShow() {
		JDopen.init(result => {
			console.log(JSON.stringify(result));
		});

		// 初次进入监听网络变化
		uni.onNetworkStatusChange(res => {
			if (res.isConnected) {
				this.init();
			}
		});

		this.$nextTick(() => {
			if (!this.isLoginPopup) {
				uni.getClipboardData({
					success: res => {
						if (res.data && this.$store.state.common.aiSearch) {
							this.$refs.aiSearch.open(res.data);
							this.$store.commit({
								type: 'setAiSearch',
								aiSearch: false
							});
						}
					},
					fail: err => {
						console.log('err', err);
					}
				});
			}

			// 存在tkoen执行以下逻辑
			if (uni.getStorageSync('token')) {
				// 获取用户信息
				// #ifdef H5
				this.$store.dispatch('getUserInfo', { versionCode: 140 });
				// #endif
				// #ifdef APP-PLUS
				plus.runtime.getProperty(plus.runtime.appid, wgtinfo => {
					let params = { ...wgtinfo };
					this.$store.dispatch('getUserInfo', params);
				});
				// #endif

				// 校验是否下过单
				this.$service.common.userHf.isFirstOrder().then(res => {
					this.newPerson = res.newPerson;
					this.isFirstOrder = res.isFirstOrder;
				});
				
				// 消息红点
				this.$service.news.notices
					.page({
						page: 1,
						size: 2
					})
					.then(res => {
						uni.hideTabBarRedDot({ index: 2 });
						res.list.forEach(item => {
							if (item.status === 0) {
								uni.showTabBarRedDot({ index: 2 });
							}
						})
					})
			} else {
				this.newPerson = true;
				this.isFirstOrder = true;
			}
		});
	},
	onHide() {
		this.$refs.aiSearch.close();
		this.$refs.wechatLogin.close();
		this.$refs.sortPopup.close();
	},
	methods: {
		init() {
			// 获取模板列表
			this.getShareTemplate();
			// 获取商品分类
			this.$service.shopping.classify.classify().then(res => {
				res.forEach(item => {
					item.label = item.mainName;
					item.loading = false;
					item.finished = false;
					item.error = false;
					item.page = 1;
					item.goodsList = [];
				});
				this.list = this.list.concat(res);
				this.isTabLoading = false;
				
				this.loadMore(this.list[0]);
				this.getHotKey();
			});

			// 获取弹窗商品分类
			this.$service.shopping.classify.classtab().then(res => {
				this.sortList = res;
				this.getNextClassifyList({ cid: res[0].cid });
			});

			// 获取功能权限
			// #ifdef H5
			this.$store.dispatch('getPermInfo', { version: '1.1.0', os: 1 });
			// #endif
			// #ifdef APP-PLUS
			plus.runtime.getProperty(plus.runtime.appid, wgtinfo => {
				let params = { ...wgtinfo };
				let os = plus.os.name;
				if (os === 'Android') {
					params.os = 1;
				} else {
					params.os = 0;
				}
				this.$store.dispatch('getPermInfo', params);
			});
			// #endif
		},

		// 获取搜索热词
		getHotKey() {
			let params = {
				type: 30
			};
			this.$service.shopping.shareTemplate.list(params).then(res => {
				this.hotKeyList = res[0].split(',');
			});
		},
		// 加载前参数处理
		beforeLoad(item) {
			if (Number(item.cid) === 0) {
				this.params.cid = '';
				this.params.order = 'ysqLevel';
				this.params.sort = 'desc';
			} else {
				this.params.cid = item.cid;
				this.params.order = '';
				this.params.sort = '';
			}

			// this.service = this.$service.shopping.goods.page(this.params);
			this.service = this.$service.common.common.hdkSalesList(this.params);
			return true;
		},
		// 获取搜索文案
		getShareTemplate() {
			let params = {
				type: 100
			};
			this.$service.shopping.shareTemplate.list(params).then(res => {
				this.shareTemplate = res;
			});
		},
		// 跳转至新人免单
		toNew() {
			if (!uni.getStorageSync('token')) {
				uni.navigateTo({
					url: '/pages/common/login',
					animationType: 'slide-in-bottom',
					animationDuration: 300
				});
				return false;
			}
			this.$Router.push('/pages/special/new');
		},
		// 跳转至微信登录
		toWechatLogin() {
			this.$refs.wechatLogin.close();
			uni.navigateTo({
				url: '/pages/common/login',
				animationType: 'slide-in-bottom',
				animationDuration: 300
			});
		},
		tabChangeCustom(index) {
			this.tabChange(index, 400);
		},
		toResult(keyWord) {
			uni.setStorageSync('keyWord', keyWord);
			uni.hideKeyboard();
			this.$Router.push({
				path: '/pages/goods/result',
				query: {
					keyWord: keyWord || ''
				}
			});
		},
		// 页面商品列表初始化  10分钟刷新一次
		refreshGoods(list, index) {
			if (index == 0) {
				// this.refreshType = setInterval(() => {
					this.$service.shopping.goods
						.recommendgoods({
							page: 1,
							size: 5
						})
						.then(res => {
							if (Array.isArray(list)) {
								list.splice(0, 5, ...res);
							}
						})
						.catch(err => {
							uni.showToast({
								title: err.message,
								icon: 'none'
							});
						});
				// }, 600000);
			}
		},
		clearRefresh() {
			clearInterval(this.refreshType);
		},

		onChange(e) {
			if (!e.show) {
				this.isLoginPopup = false;
				uni.showTabBar({});
				uni.getClipboardData({
					success: res => {
						if (res.data && this.$store.state.common.aiSearch) {
							this.$refs.aiSearch.open(res.data);
							this.$store.commit({
								type: 'setAiSearch',
								aiSearch: false
							});
						}
					}
				});
			} else {
				this.isLoginPopup = true;
				uni.hideTabBar({});
			}
		},
		onChangeLogin(e) {
			if (!e.show) {
				this.isLoginPopup = false;
				uni.showTabBar({});
				uni.getClipboardData({
					success: res => {
						if (res.data && this.$store.state.common.aiSearch) {
							this.$refs.aiSearch.open(res.data);
							this.$store.commit({
								type: 'setAiSearch',
								aiSearch: false
							});
						}
					}
				});
			} else {
				this.isLoginPopup = true;
				if (plus.os.name === 'iOS') {
					uni.hideTabBar({});
				}
			}
		},
		onChangeSort(e) {
			if (!e.show) {
				uni.showTabBar({});
			} else {
				uni.hideTabBar({});
			}
		},
		changeSelect(item, index) {
			this.sortActive = index;
			this.getNextClassifyList({ cid: item.cid });
		},
		// 获取一级商品分类
		getNextClassifyList(params) {
			this.cid = params.cid;
			this.sortGoodsList = [];
			this.$service.shopping.classify.nextClassify(params).then(res => {
				this.sortGoodsList = res;
			});
		},
		// 商品分类跳转至结果页
		sortToResult(val) {
			if (!this.cid) {
				this.cid = 0;
			}
			if (this.cid === 5) {
				this.cid = 3;
			} else if (this.cid === 7) {
				this.cid = 6;
			} else if (this.cid === 8) {
				this.cid = 9;
			} else if (this.cid === 13) {
				this.cid = 12;
			} else if (this.cid === 16) {
				this.cid = 15;
			}
			uni.setStorageSync('keyWord', val);
			this.$refs.sortPopup.close();
			this.$Router.push({
				path: '/pages/goods/result',
				query: {
					cid: this.cid,
					keyWord: val || '',
					type: 1
				}
			});
		}
	},
	filters: {
		imageCompress(val) {
			return val.slice(0, val.length - 3) + '100';
		}
	}
};
</script>
<style lang="scss">
.content {
	background: #f5f7fb;

	.top-bar {
		width: 100%;
		height: 100rpx;
		background: #f70114;
	}

	.tab-nav {
		position: sticky;
		top: 196rpx;
		z-index: 100;
		@include flexBox(space-between, center);
		background: #fff;
		/deep/.uni-scroll-view ::-webkit-scrollbar {
			display: none;
			width: 0;
			height: 0;
			color: transparent;
			background: transparent;
		}

		.left {
			width: 680rpx;
			padding-right: 10rpx;
		}
		.right {
			width: 70rpx;
			text-align: center;
			border-left: 2rpx solid #f6f6f6;
			color: $main-color;
			.iconfont {
				font-size: 40rpx;
			}
		}
	}
	.goods-refresh {
		margin-top: 20rpx;
		@include flexBox(center, center);
		font-size: 26rpx;
		color: #b3b3b4;
		&__icon {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
		&__point {
			width: 5rpx;
			height: 5rpx;
			border-radius: 50%;
			background: #b3b3b4;
			margin: 0 10rpx;
		}
		&__ac {
			color: #dc495b;
		}
	}

	.goods-list {
		margin: 0 auto 20rpx;
		.tab-box {
			text-align: center;
			&__title {
				margin: 20rpx 0;
			}
			&__li {
				width: 704rpx;
				margin: 0 auto;
				@include flexBox(none, none, none, wrap);
			}
		}
		&__tag {
			background-color: #fff;
			text-align: center;
			width: 156rpx;
			height: 52rpx;
			font-size: 24rpx;
			color: #171717;
			line-height: 52rpx;
			border-radius: 26rpx;
			margin: 10rpx;
			padding: 0 30rpx;
			transition: 0.5s;
			position: relative;
			@include ellipsis(1);
			@include flexBox(center, center);
			&.active {
				background-color: #fbebec;
				color: #f63e4c;
				.iconfont {
					font-size: 30rpx;
				}
			}
		}

		.goods-wrap {
			width: 722rpx;
			margin: 20rpx auto;
			padding: 16rpx;
			background: $color-white;
			border-radius: 16rpx;
		}
	}

	.user-guid {
		.side-float {
			position: fixed;
			right: 20rpx;
			top: 80vh;
			width: 120rpx;
			height: 168rpx;
			z-index: 1000;
			transition: 0.5s;
			opacity: 1;
			&.hide {
				right: -120rpx;
				opacity: 0;
			}
			.img-box {
				width: 120rpx;
				height: 120rpx;
				position: absolute;
				.image {
					width: 120rpx;
					height: 120rpx;
					animation: animate_in 0.5s infinite;
				}
			}
		}
	}

	.authorize {
		width: 100%;
		height: 70rpx;
		position: fixed;
		z-index: 100;
		bottom: 30rpx;
		animation: authorize_in 1s linear;
		@include flexBox(center, center);

		.left {
			width: 654rpx;
			height: 70rpx;
			padding: 0 10rpx 0 34rpx;
			border-radius: 50rpx;
			background: rgba(25, 25, 25, 0.8);
			font-size: 24rpx;
			color: #fff0ce;
			@include flexBox(space-between, center);

			.text {
				@include flexBox(null, center);

				.iconfont {
					font-size: 32rpx;
					margin-right: 6rpx;
				}
			}

			.submit {
				width: 200rpx;
				line-height: 48rpx;
				border-radius: 50rpx;
				background: linear-gradient(225deg, #f70114, #f77101);
				display: block;
				@include flexBox(center);

				.iconfont {
					margin-right: 6rpx;
				}
			}
		}

		.icon-guanbi {
			margin-left: 12rpx;
			opacity: 0.5;
		}
	}

	.skeleton-wrap {
		background: $color-white;
		border-radius: 16rpx;
		padding: 0 20rpx;
		width: 722rpx;
		margin: 20rpx auto;
		overflow: hidden;
	}
}

@keyframes authorize_in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes animate_in {
	0% {
		right: -6rpx;
	}

	50% {
		right: 0;
	}

	100% {
		right: -6rpx;
	}
}

@keyframes animate_show {
	0% {
		width: 0;
		opacity: 0;
	}

	100% {
		width: 100%;
		opacity: 1;
	}
}

// 新人免单入口
.new-person {
	.main {
		@include flexBox(center, center, column);

		.img-box {
			width: 590rpx;
			height: 420rpx;
			@include flexBox(center, center);

			.image {
				height: 100%;
				animation: animate_show 0.5s;
			}
		}

		.close {
			margin-top: 30rpx;
			height: 40rpx;
			text-align: center;
			@include flexBox(center, flex-start);

			.iconfont {
				@include flexBox(center, center);
				font-size: 24rpx;
				width: 34rpx;
				color: $color-white;
				height: 34rpx;
				border-radius: 50rpx;
				padding: 8rpx;
				background: rgba(0, 0, 0, 0.8);
			}
		}
	}
}

// 微信登录弹窗
.wechat-login {
	.main {
		width: 550rpx;
		height: 576rpx;
		position: relative;
		color: #fff;

		.bg {
			width: 100%;
			height: 100%;
			position: absolute;
		}
		.to-wechat {
			width: 292rpx;
			height: 88rpx;
			position: absolute;
			bottom: 40rpx;
			left: 50%;
			margin-left: -146rpx;
		}
		.iconfont {
			color: #fff;
			padding: 10rpx;
			position: absolute;
			left: 50%;
			margin-left: -30rpx;
			bottom: -80rpx;
			font-size: 40rpx;
		}
	}
}

// 商品分类弹窗
.sort-popup {
	.main {
		position: relative;
		background: #fff;
		height: 900rpx;
		border-radius: 36rpx 36rpx 0 0;
		overflow: hidden;
		z-index: 5000;
		@include flexBox(space-between, center);
		.icon-guanbi {
			position: absolute;
			top: 10rpx;
			right: 20rpx;
			color: #d0d0d0;
			font-size: 40rpx;
			z-index: 100;
		}
		.side-list {
			height: 100%;
			width: 200rpx;
			overflow: auto;
			background: #fff;
			border-top: 30rpx solid $bg-grey-second;
			.side-item {
				line-height: 108rpx;
				font-size: 28rpx;
				color: #57575d;
				text-align: center;
				position: relative;
				transition: 0.8s;
				border-bottom: 2rpx solid #edeeef;
				background: $bg-grey-second;
				.line {
					opacity: 0;
					background: $main-color;
					height: 82rpx;
					width: 8rpx;
					border-radius: 50rpx;
					position: absolute;
					left: 0;
					top: 50%;
					margin-top: -41rpx;
					transition: 0.3s;
				}
				&.active {
					border-color: $main-color;
					background: $bg-white;
					border-bottom: 2rpx solid #f6f6f6;
					.line {
						opacity: 1;
					}
				}
			}
		}
		.classify-info {
			width: 550rpx;
			height: 100%;
			padding: 18px 0;
			background: $color-white;
			overflow: auto;
			.first-classify {
				margin-bottom: 40rpx;
				.classify-type {
					margin-bottom: 30rpx;
					@include flexBox(center, center);
					.text {
						width: 200rpx;
						text-align: center;
						font-size: 28rpx;
						color: #000;
						font-weight: 600;
					}
					.line {
						width: 98rpx;
						height: 2rpx;
						background: #d0d0d0;
					}
				}
				.classify-detail {
					@include flexBox(flex-start, null, null, wrap);
					.last-classify {
						width: 120rpx;
						margin: 0 30rpx 40rpx;
						text-align: center;
						.img-box {
							width: 120rpx;
							height: 120rpx;
							padding: 20rpx;
							.image {
								max-width: 100%;
								max-height: 100%;
							}
						}
						.text {
							color: #2b2b2b;
							font-size: 24rpx;
							margin-top: 12rpx;
						}
					}
				}
			}
		}
	}
}
</style>
